/*
 * @Author: wzh 
 * @Date: 2021-06-08 11:15:06 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2021-06-08 13:15:59
 */
 :root {
  --primary-light: #39ddfa;
  --primary: #00abdf;
  --primary-dark: #008ada;
  
  --white: #FFFFFF;
  --greyLight-1: #ebf5fc;
  --greyLight-2: #d5e0f3;
  --greyLight-3: #c1d9f0;
  --greyDark: #646b8c;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // outline: 1px dashed maroon;
}

html {
  font-size: 10px; // 下面所有rem的参考像素值
}

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--greyLight-2);
}

.card {
  // outline: 1px dashed maroon;

  width: 34rem;
  border-radius: 2rem;
  background: var(--greyLight-1);
  box-shadow: 0px 20px 30px rgba(100, 131, 177, 0.2);
  padding: 5rem;
  border: 1px solid white;

  &__percent {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        width: 24rem;
        height: 24rem;
        z-index: 1;
        transform: rotate(-90deg);
      }
      
      svg circle {
        fill: none;
        stroke-linecap: round;
        transform: translate(3rem, 3rem);
        stroke-dasharray: 565.2; // 3.14*180
        stroke-dashoffset: 282.6; // 上面的一半
        transition: all 1s ease;
        stroke-width: 24;
      }

      .circle {
        position: absolute;
        width: 23rem;
        height: 23rem;
        border-radius: 50%;
        box-shadow: 6px 6px 8px var(--greyLight-2),
                    -6px -6px 8px var(--white);
        background: var(--greyLight-1);

        &__medium {
            width: 20.5rem;
            height: 20.5rem;
            box-shadow: inset 8px 8px 10px var(--greyLight-2),
                        inset -4px -4px 8px var(--white);
        }
        &__small {
            width: 15.5rem;
            height: 15.5rem;
            box-shadow: 6px 6px 8px var(--greyLight-2),
                        -2px -2px 8px var(--white);
        }
      }
  }

  &__number {
      position: absolute;
      color: var(--greyDark);
      font-size: 3.6rem;
  }
}


.form {
  // outline: 1px dashed maroon;

  padding: 4rem;
  margin-left: 4rem;
  display: grid;
  grid-template-columns: 40% 60%;
  border-radius: 2rem;
  background: var(--greyLight-1);
  text-align: center;
  box-shadow: 0px 20px 30px rgba(100, 131, 177, 0.2);
  border: 1px solid var(--white);
  position: relative;

  input {
      border: none;
      outline: none;
      background: none;
      width: 5rem;
      font-size: 1.6rem;
      text-align: center;
      padding: .8rem;
      border-radius: 1rem;
      margin-right: 1rem;
      color: var(--primary);

      box-shadow: inset .2rem .2rem .4rem var(--greyLight-2),
                  inset -.3rem -.3rem .4rem var(--white);
      &::placeholder { color: var(--greyLight-3); }
      &:focus { color: var(--primary);
      box-shadow: .3rem .3rem .6rem var(--greyLight-3), 
                          -.2rem -.2rem .5rem var(--white); }
  }

  &__btn {
      border: none;
      outline: none;
      letter-spacing: .8px;
      background: var(--greyLight-1);
      padding: .8rem 2rem;
      border-radius: 2rem;
      color: var(--white);
      cursor: pointer;
      background: linear-gradient(-25deg, var(--primary) 0%, var(--primary-light) 100%);
      margin-left: 1rem;
      
      &:hover {
          background: linear-gradient(-25deg, var(--primary-dark) 0%, var(--primary) 100%);
      }
  }

}




.tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: -5.2rem;
  padding: 1rem 2rem;
  border-radius: 1rem;
  background: var(--greyLight-1);
  font-size: 1.2rem;
  color: var(--primary-dark);
  opacity: 0;
  transition: all .3s ease;
  margin-left: 1rem;

  &__text { margin-left: .6rem;}

  &.fade-in { animation: fadeIn .8s ease;}
  
  &::after {
      content: '';
      position: absolute;
      left: 52%;
      bottom: 72%;
      width: 2rem;
      height: 2rem;
      background: var(--greyLight-1);
      clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
      transform: rotate(135deg);
      border-radius: 0 0 0 0.4em;
      
  }
}


@keyframes fadeIn {
  100% {
    transform: translateY(-40px) scale(.5);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}